import './todoList.css'
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, removeTodo, toggleAll, handleTodo } from '../../store/modules/todoListStore';

function TodoList() {
    const { list } = useSelector(state => state.todoList)
    // console.log(list);
    const dispatch = useDispatch()
    const allCompleted = list.length > 0 && list.every(item => item.completed)
    function add(e) {
        // console.log(e);
        if (e.key === 'Enter') {
            let obj = {
                id: list.length ? list[list.length - 1].id + 1 : 1,
                title: e.target.value,
                completed: false
            }
            dispatch(addTodo(obj))
            e.target.value = ''
        }
    }
    function remove(id) {
        dispatch(removeTodo(id))
    }
    function getAll() {
        dispatch(toggleAll())
    }
    function handle(id) {
        dispatch(handleTodo(id))
    }

    return (
        <section className="todoapp">
            <header className="header">
                <h1>todos</h1>
                <input
                    className="new-todo"
                    autoFocus
                    autoComplete="off"
                    placeholder="What needs to be done?"
                    onKeyDown={(e) => { add(e) }}//进行封装
                />
            </header>
            <section className="main">
                <input id="toggle-all" className="toggle-all" type="checkbox" checked={allCompleted} onChange={getAll} />
                <label htmlFor="toggle-all"></label>
                <ul className="todo-list">
                    {
                        list.map((item) => (
                            <li className={`todo ${item.completed ? 'completed' : ''}`} key={item.id}>
                                <div className="view">
                                    <input className="toggle" type="checkbox" checked={item.completed} onChange={() => { handle(item.id) }} />
                                    <label>{item.title}</label>
                                    <button className="destroy" onClick={() => { remove(item.id) }}></button>
                                </div>
                            </li>
                        ))
                    }
                    {/* <li className="todo">
                        <div className="view">
                            <input className="toggle" type="checkbox" />
                            <label>learn react</label>
                            <button className="destroy"></button>
                        </div>
                    </li>
                    <li className="todo completed">
                        <div className="view">
                            <input className="toggle" type="checkbox" defaultChecked={true} />
                            <label>learn react</label>
                            <button className="destroy"></button>
                        </div>
                    </li> */}
                </ul>
            </section>
        </section>
    )
}

export default TodoList;